import * as React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

import Home_page from '../pages/Home_page';
import Travel_page from '../pages/Travel_page';
import Interest_page from '../pages/Interest_page';

function Show_Home_page({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Home_page />
        </View>
    );
}

function Show_Travel_page({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Travel_page />
        </View>
    );
}

function Show_Interest_page({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Interest_page />
        </View>
    );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
    return (
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                let iconName;

                if (route.name === '主页') {
                    iconName = focused
                        ? 'planet'
                        : 'planet-outline';
                } else if (route.name === '路线') {
                    iconName = focused ? 'bicycle' : 'bicycle-outline';
                } else if (route.name === '趣游') {
                    iconName = focused ? 'ios-apps' : 'ios-apps-outline';
                }

                // You can return any component that you like here!
                return <Ionicons name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: 'black',
            tabBarInactiveTintColor: 'black',
        })}>
            <Tab.Screen name="主页" component={Show_Home_page} options={{ presentation: 'transparentModal', headerShown: false }} />
            <Tab.Screen name="路线" component={Show_Travel_page} options={{ presentation: 'transparentModal', headerShown: false }} />
            <Tab.Screen name="趣游" component={Show_Interest_page} options={{ presentation: 'transparentModal', headerShown: false }} />
        </Tab.Navigator>
    );
}

export default function Navigation() {
    return (
        <NavigationContainer>
            <MyTabs />
        </NavigationContainer>
    );
}